<template>
<div :class="$style.container">
  <group>
    <x-input placeholder="请输入您的注册邮箱" v-model="form.account" is-type="email"></x-input>
    <x-input placeholder="请输入注册密码" :type="isPwd ? 'password': 'text'" 
      :show-clear="false" :min="8" v-model="form.password">
      <div slot="right" @click.stop="handleEyeClick">
        <i v-if="isPwd" :class="[$style.icon,'iconfont','icon-in_biyan']"/>
        <i v-else :class="[$style.icon,'iconfont','icon-yanjing']"/>
      </div>
    </x-input>
  </group>
  <p :class="$style.signUp">
    <router-link tag="span" :to="{path: '/'}">回到首页</router-link>
    <router-link tag="span" :to="{path: '/signUp'}">立即注册</router-link>
  </p>
  <x-button type="primary" @click.native="login">
    <div :class="$style.BtnText">登录</div>
  </x-button>
  <div>
     <loading :show="showLoading" text="加载中..."></loading>
     <alert v-model="showAlert" title="提示" :content="tip"></alert>
  </div>
</div>
</template>

<script>
import { Group, XInput, XButton, Loading, Alert } from 'vux'
import http from '../../../APIService/http'
import { signPwd } from '../../../utils/config'
import obj from '../../../utils/auth'
export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: '',
      isPwd: true,
      form: {
        account: '',
        password: ''
      }
    }
  },
  components: {
    Group,
    XInput,
    XButton,
    Loading,
    Alert
  },
  methods: {
    // 切换眼睛
    handleEyeClick () {
      this.isPwd = !this.isPwd
    },
    // login
    async login () {
      try {
        if (!this.form.account || !this.form.password) {
          this.tip = '请填写完整'
          this.showAlert = true
          return false
        }
        this.showLoading = true
        let params = {
          account: this.form.account,
          password: signPwd(this.form.password)
        }
        let res = await http.post(`/login`, params)
        if (res.code === 0) {
          this.showLoading = false
          obj.setToken(res.data.token)
          this.$store.commit('SET_USER', {token: res.data.token})
          this.$router.push({
            path: '/'
          })
        } else if (res.code === -1) {
          this.showLoading = false
          this.tip = res.msg
          this.showAlert = true
        } else {
          throw new Error('error')
        }
      } catch (err) {
        console.log('login fail:', err)
        this.showLoading = false
      }
    }
  }
}
</script>

<style lang='less' module>
.container {
  padding-top: 50px;
  .icon{
    font-size:20px;
  }
  input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #aab2bd;
  }
  .signUp {
    padding: 0px 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    span {
      margin-top:20px;
      margin-right:10px;
      display: inline-block;
      color:#666;
      font-size:12px;
    }
  }
  button {
    margin: 50px 10px;
    background: #e36049;
    line-height: 50px;
    width: 355px!important;
    border-radius: 25px;
  }
}
</style>
<style>
.weui-btn_primary:not(.weui-btn_disabled):active  {
  background-color: #e36049!important;
}
</style>